<template>
  <m-window-frame
    title="图形配置"
    style="height: 100vh"
    :cancelText="'取 消'"
    :okText="'确 定'"
    :okLoading="shapeCustomizationManagementModel.okLoading"
    class="v-view-cus-pane"
    @cancel="shapeCustomizationManagementModel.handleCancel()"
    @ok="shapeCustomizationManagementModel.handleOk()"
  >
    <div class="view-cus-body g-fd-c g-ov-hidden">
      <div class="view-cus-header g-flex-0">
        <attr-tips type="ShapeCustomization"></attr-tips>
      </div>
      <div class="view-cus-content g-flex-1 g-flex g-ov-hidden">
        <div
          class="view-cus-left g-flex-0 g-flex"
          style="border-left: 1px solid #ddd"
        >
          <pane-nav
            :tabList="tabList"
            :activeKey="shapeCustomizationManagementModel.activeTab"
            style="height: 100%"
            @changeActiveTab="handleChangeActiveTab"
          ></pane-nav>
        </div>
        <div class="g-flex-1 g-ov-hidden">
          <component
            :is="activeTabItem?.comp"
            v-if="activeTabItem?.comp"
            :shapeCustomizationManagementModel="shapeCustomizationManagementModel"
          ></component>
        </div>
      </div>
    </div>
  </m-window-frame>
</template>

<script lang="ts" setup>
import MWindowFrame from "@/common/ipcWindow/WindowFrame.vue";
import { computed, reactive } from "vue";
import AttrTips from "@/common/attrTip/AttrTip.vue";
import PaneNav from "@/modules/model/modals/diagramCustomization/comps/PaneNav.vue";
import { tabList, ShapeCustomizationManagementModel } from "./ShapeCustomizationManagementModel";
import { AttributeTabKey } from "@/constants/Enums";

const params = app.$route.query;

const shapeCustomizationManagementModel = reactive(new ShapeCustomizationManagementModel(params));

const activeTabItem = computed(() => {
  const activeTabKey = shapeCustomizationManagementModel.activeTab;

  return tabList.find(tabItem => tabItem.key === activeTabKey);
});

const handleChangeActiveTab = (key: AttributeTabKey, name: string) => {
  shapeCustomizationManagementModel.changeActiveTab(key, name);
};
</script>
<style lang="scss">
.v-view-cus-pane {
  .view-cus-body {
    height: 100%;

    .view-cus-header {
      border-bottom: 1px solid #e0e0e0;
    }

    .view-cus-right {
      padding-right: 18px;
    }
  }

  .view-cus-right {
    overflow: hidden;
  }
}
</style>
